<template>
  <div class="app-container">
    <template>
      <div class="right-detail">
        <!-- 搜索框 -->
        <div class="form">
          <el-form
            ref="form"
            :model="form"
            :rules="rule"
            label-width="auto"
            :inline="true"
            size="mini"
          >
            <el-row>
              <el-col :span="4.5">
                <el-form-item prop="orderNum" label="订单号：">
                  <el-input v-model="form.orderNum" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col span="4.5">
                <el-form-item prop="start" label="下单时间：">
                  <el-date-picker v-model="form.start" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col span="4.5">
                <el-form-item prop="end" label-width="3em" label="——">
                  <el-date-picker v-model="form.end" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col span="1">
                <el-form-item prop label>
                  <el-button type="primary" size="mini" @click="searchList">查 询</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

<!-- 利用 vue 的 split-pane 做拆分表格，让各个部分宽度/高度 可以拉伸 -->
        <split-pane :min-percent="10" split="horizontal" v-on:resize="resize">


          <!-- 上部分 -->
          <template slot="paneL">
            <span class="titleName">订单信息列表</span>
            <div class="top-type" ref="topType">
              <split-pane :min-percent="10" :default-percent="55" split="vertical">
                <!-- 左侧table -->
                <template slot="paneL">
                  <div class="table" ref="inner" slot="left">
                    <el-table
                      :data="tableData"
                      border
                      class="charge"
                      :height="typeHeight"
                      :header-cell-style="{ textAlign: 'center' }"
                      highlight-current-row
                      @row-click="rowClick"
                      @row-dblclick="dbrowClick"
                    >
                      <el-table-column
                        :index="indexMethod"
                        type="index"
                        align="center"
                        label="序号"
                        width="50"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="attCode"
                        label="订单号"
                        show-overflow-tooltip
                        width="160"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="attStatusName"
                        label="订单状态"
                        show-overflow-tooltip
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="attCreatetime"
                        label="下单时间"
                        show-overflow-tooltip
                        width="160"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="adcConsigner"
                        label="客户名称"
                        show-overflow-tooltip
                        width="100"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="adcLinkperson"
                        label="联系人"
                        show-overflow-tooltip
                        width="80"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="adcLinkphone"
                        label="联系电话"
                        show-overflow-tooltip
                        width="120"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="adcSAddress"
                        label="起始地"
                        show-overflow-tooltip
                        width="200"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="adcDAddress"
                        label="目的地"
                        show-overflow-tooltip
                        width="200"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="goodsForm[0].gdsName"
                        label="货物名称"
                        show-overflow-tooltip
                        width="160"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="gdsWeight"
                        label="订单总质量(T)"
                        show-overflow-tooltip
                        width="160"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="rmbamount"
                        label="订单金额(RMB)"
                        show-overflow-tooltip
                        width="160"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="attAuditor"
                        label="审核人"
                        show-overflow-tooltip
                        width="160"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="attAudittime"
                        label="审核时间"
                        show-overflow-tooltip
                        width="180"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="attAuditdiffering"
                        label="审核拒绝原因"
                        show-overflow-tooltip
                        width="180"
                      ></el-table-column>
                      <el-table-column
                        align="center"
                        prop="attRemark"
                        label="备注"
                        show-overflow-tooltip
                        width="180"
                      ></el-table-column>
                    </el-table>
                    <div class="pagination">
                      <el-pagination
                        class="pagination"
                        small
                        background
                        ref="pagination"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="Pagination.currentPage"
                        :page-sizes="Pagination.pageSizeList"
                        :page-size="Pagination.pageSize"
                        :layout="Pagination.layout"
                        :total="Pagination.total"
                      ></el-pagination>
                    </div>
                  </div>
                </template>
                <!-- 右侧地图 -->
                <template slot="paneR">
                  <div :style="'height:' + mapHeight + 'px'" class="tu" slot="right">
                    <baidu-map style="height:100%" ref="baiduMap" :mapDataA="mapData"></baidu-map>
                  </div>
                </template>
              </split-pane>
            </div>
          </template>
          <!-- 下半部分 -->
          <template slot="paneR">
            <div class="titleName">运单列表</div>
            <div class="bottom-code"  style="background-color: #fff;" ref="bottomCode">
              <el-table
                :data="dynamicData"
                border
                :height="detlHeight"
                :header-cell-style="{ textAlign: 'center' }"
                highlight-current-row
                >
                <el-table-column type="index" align="center" label="序号" width="50px"></el-table-column>
                <el-table-column
                  align="center"
                  prop="wabCode"
                  label="运单号"
                  show-overflow-tooltip
                  width="180px"
                ></el-table-column>
                <el-table-column align="center" prop="trkNo" label="车牌号" show-overflow-tooltip width></el-table-column>
                <el-table-column align="center" prop="dvrName" label="司机" show-overflow-tooltip width></el-table-column>
                <el-table-column
                  align="center"
                  prop="dvrCtctel"
                  label="司机电话"
                  show-overflow-tooltip
                  width
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="wabStatusName"
                  label="状态"
                  show-overflow-tooltip
                  width
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="wabGoodname"
                  label="货物名称"
                  show-overflow-tooltip
                  width
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="wabWeight"
                  label="货物重量(T)"
                  
                  show-overflow-tooltip
                  width="120"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="wcdSttime"
                  label="装货时间"
                  show-overflow-tooltip
                  width="180px"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="wcdEdtime"
                  label="卸货时间"
                  show-overflow-tooltip
                  width="180px"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="wabRemark"
                  label="备注"
                  show-overflow-tooltip
                  width
                ></el-table-column>
              </el-table>
            </div>
          
          </template>
        </split-pane>
      </div>
    </template>
  </div>
</template>
<script>
import paginationMixin from "@/mixins/pagination";
import resizeMixin from "@/mixins/resize";
import { orderInfoH, wayBillInfo } from "@/request/api";
import { PATTERN } from "@/utils/rules";
import baiduMap from "@/components/baidumapa";
import scrollChange from '@/utils/onscroll.js';

export default {
  name: "router.threeOrderSupervise",
  mixins: [paginationMixin, resizeMixin],
  components: { baiduMap },
  data() {
    return {
      split1: 0.8,
      mapHeight: 350,
      typeHeight: -1,
      detlHeight: -1,
      form: {
        orderNum: "",
        orderStatue: "",
        start: "",
        end: ""
      },
      rule: {
        orderNum: [],
        orderStatue: [],
        start: []
      },
      tableData: [],
      mapData: {
        Sint: "",
        Sant: "",
        Dint: "",
        Dant: ""
      },
      dynamicData: [], //动态数据
      currentData: {} //单击选中数据
    };
  },
  mounted() {
    this.refreshList();
    let demandWrapper2=document.querySelector(".charge .el-table__body-wrapper");
    // 新增滚动条监听事件
    scrollChange(demandWrapper2);
  },
  created() {
    this.resize = () => {
      this.typeHeight = this.$refs.topType.offsetHeight - 55;
      // 70
      this.detlHeight = this.$refs.bottomCode.offsetHeight - 95;
      // 130
      this.mapHeight = this.$refs.topType.offsetHeight - 55;
    };
  },
  watch: {
    typeHeight() {
      this.mapHeight = this.$refs.topType.offsetHeight - 60;
    }
  },
  methods: {
    //查询
    searchList() {
      this.refreshList();
    },
    indexMethod (index) {
      return 1 + index + (Number(this.Pagination.currentPage) - 1) * Number(this.Pagination.pageSize)
    },
    //重写getList
    getList(currentPage, pageSize, updateTotal) {
      orderInfoH({
        attCode: this.form.orderNum,
        attStatus: "",
        attCreatetimeStart: this.form.start,
        attCreatetimeEnd: this.form.end,
        PageIndex: this.Pagination.currentPage,
        PageSize: this.Pagination.pageSize
      }).then(response => {
        this.tableData = response.data;
        updateTotal(Number(response.total));
      });
      this.mapData.Sint = "";
      this.mapData.Sant = "";
      this.mapData.Dint = "";
      this.mapData.Dant = "";
      this.$refs.baiduMap.allmapA();
    },
    //计算里程
    getJourney() {
      var lng = this.sendForm.jd;
      var lat = this.sendForm.wd;
      var lng1 = this.acceptForm.jd;
      var lat1 = this.acceptForm.wd;

      if (!lng || !lat || !lng1 || !lat1) return;

      this.searchTransit(
        { lng, lat },
        { lng: lng1, lat: lat1 },
        this.searchComplete,
        "北京"
      );
    },
    searchTransit(startPoint, endPoint, searchComplete, map) {
      var BMap = window.BMap;
      var start = new BMap.Point(startPoint.lng, startPoint.lat);
      var end = new BMap.Point(endPoint.lng, endPoint.lat);
      var transit = new BMap.DrivingRoute(map, {
        onSearchComplete: searchComplete
      });
      transit.search(start, end);
    },
    searchComplete(results) {
      var output,
        time = "";
      var plan = results.getPlan(0);
      time = plan.getDuration(true); //获取时间

      output = plan.getDistance(true); //获取距离

      this.distanceForm.adcDistanced = output;
      this.distanceForm.adcDistancedtime = time;
    },
    //单击
    rowClick(row) {
      this.currentData = Object.assign({}, row);
      this.mapData.Sint = this.currentData.adcSX;
      this.mapData.Sant = this.currentData.adcSY;
      this.mapData.Dint = this.currentData.adcDX;
      this.mapData.Dant = this.currentData.adcDY;
      //this.$refs.baiduMap.allmapA();
      this.getDynamic();
    },
    //获取动态信息
    getDynamic() {
      wayBillInfo({
        attUuid: this.currentData.uuid
      }).then(res => {
        if (res.success === "1") {
          this.dynamicData = res.data;
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  overflow: hidden;
  background-color: #fff;
  position: relative;
  height: 100%;
}
.right-detail {
  height: 100%;
  .top-type {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    // .demo-split{
    // width: 100%;
    // height: 100%;
    // display: flex;
    // justify-content: space-between;
    .table {
       //拆分窗格后修改表格宽度
      width: 100%;
      font-size: 1.4rem;
    }
    // }
  }
  .bottom-code {
    width: 100%;
    height: 100%;
  }
}
.titleName {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}
.tu {
   //拆分窗格后修改地图宽度
  width: 100%; 
  // height: 350px;
  max-height: 100%;
  overflow: hidden;
  padding-left: 10px;
}
.form {
  margin-left: -13px;
}

// 修复 添加横向的 split之后，父级宽度缺失
.top-type > div.vue-splitter-container {
  width: 100%;
}
</style>
